<template>
	<view>
		
		<view class="top" style="position: sticky;top: 0;z-index: 4;">
			<nav-bar :titleName="'最新资讯'" :backUrl="'/'" style=" position: sticky;top: 0;z-index: 99;"></nav-bar>
			<view class="tabs_part">
				<u-tabs :list="tabs_list" lineWidth="30" lineHeight="5" :activeStyle="{ color: '#FE609D' }" lineColor="#FE609D" itemStyle="padding-left: 0px; padding-right: 0px; height: 88rpx;width: 375rpx;" @click="TabClick"></u-tabs>
			</view>
		</view>
		
		<view class="tab_swiper">
			<view class="tab1" v-if="tabIndex == 0">
				<view class="tab_cont">
					<view class="tab1_item" v-for="(item,index) in tab1List" :key="index" @click="toDetail(item.id)" :class="index == (tab1List.length - 1) ? 'noBorder' : ''">
						<view class="top_pic">
							<image :src="item.imgUrl" mode=""></image>
						</view>
							<view class="tab1_item_title">
								{{ item.title }}
							</view>
							<view class="tab1_item_desc">
								{{ item.desc }}
							</view>
					</view>
				</view>
			</view>
			
			<view class="tab2" v-if="tabIndex == 1" style="padding-bottom: 30rpx;">
				
				<view class="gjzc">
						<view class="tab2_item" v-for="(item,index) in tab2List" :key="index" @click="toDetail(item.id)" :class="index == (tab2List.length - 1) ? 'noBorder' : ''">
							<view class="left_pic">
								<image :src="item.imgUrl" mode=""></image>
							</view>
							<view class="tab2_item_info">
								<view class="tab2_item_title">
									{{ item.title }}
								</view>
								<view class="tab2_item_bott">
									<view class="watch">
										点击数<span>{{ item.watch }}</span>
									</view>
									<view class="time">
										{{ item.time }}
									</view>
								</view>
							</view>
						</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	export default {
		components: {
			navBar,
		},
		data() {
			return {
				tabIndex: 0,
				
				tabs_list: [
					{
						name: "新闻公示",
					},
					{
						name: "违规公示",
					},
				],
				tab1List: [
					{
						imgUrl: '../../static/other/p1.png',
						title: '「生态资讯」省第六生态环境保护督察组进驻毕发个儿歌儿',
						desc: '3月11日至22日，贵州省第六生态环境保护督察组（以下简称督察组）进驻毕节市开展2024年贵州省生态...',
						id: 1,
					},
					{
						imgUrl: '../../static/other/p2.png',
						title: '深化光电子信息产业产教融合',
						desc: '3月11日至22日，贵州省第六生态环境保护督察组（以下简称督察组）进驻毕节市开展2024年贵州省生态...',
						id: 2,
					},
					{
						imgUrl: '../../static/other/p3.png',
						title: '今日财经时讯及重要市场资讯',
						desc: '3月11日至22日，贵州省第六生态环境保护督察组（以下简称督察组）进驻毕节市开展2024年贵州省生态...',
						id: 3,
					}
				],
				tab2List: [
					{
						imgUrl: '../../static/other/illegal.png',
						title: '2024年3.8节违规商家公示处罚',
						watch: '1254',
						time: '2024-02-26  10:12'
					},
					{
						imgUrl: '../../static/other/illegal.png',
						title: '2024年3.8节违规商家公示处罚',
						watch: '1254',
						time: '2024-02-26  10:12'
					},
					{
						imgUrl: '../../static/other/illegal.png',
						title: '2024年3.8节违规商家公示处罚',
						watch: '1254',
						time: '2024-02-26  10:12'
					},
					{
						imgUrl: '../../static/other/illegal.png',
						title: '2024年3.8节违规商家公示处罚',
						watch: '1254',
						time: '2024-02-26  10:12'
					},
					{
						imgUrl: '../../static/other/illegal.png',
						title: '2024年3.8节违规商家公示处罚',
						watch: '1254',
						time: '2024-02-26  10:12'
					},
				],
			};
		},
		methods: {
			TabClick(item) {
				console.log(item)
				this.tabIndex = item.index
			},
			switchPage(url) {
				uni.switchTab({
					url: url
				})
			},
			toDetail(id) {
				console.log(1232)
				uni.navigateTo({
					// url: '/subpkgs/news_detail/news_detail' + id
					url: '/pages/public/news_detail?id=' + id
				})				
				console.log(1232)
			}
		},
	}
</script>

<style lang="scss" scoped>
.main_container {
	width: 750rpx;
}

.tabs_part {
	width: 750rpx;
	height: 88rpx;
	background: #FFFFFF;
}

// ::v-deep .u-tabs__wrapper__nav__line {
// 	transform: translateX(-50%)!important;
// }

.tab_swiper {
	width: 750rpx;
	z-index: 2;
}

.tab_cont {
	width: 706rpx;
	// height: 967rpx;
	// background: #FFFFFF;
	// box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.06);
	// border-radius: 10rpx;
	margin: 20rpx auto;
}

.tab1_item {
	width: 690rpx;
	// height: 515rpx;
	background: #FFFFFF;
	border-radius: 15rpx 15rpx 15rpx 15rpx;
	margin: 30rpx auto;
	padding: 20rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	
	.top_pic {
		width: 650rpx;
		height: 280rpx;
		// margin-right: 30rpx;
		image {
			width: 650rpx;
			height: 280rpx;
		}
	}
}


// .tab1_item_info {
// 	width: 476rpx;
	
// }

.tab1_item_title {
	width: 611rpx;
	// height: 80rpx;
	font-weight: 700;
	font-size: 28rpx;
	color: #333333;
	white-space: nowrap;
	/* 防止文本换行 */
	overflow: hidden;
	/* 隐藏超出容器的内容 */
	text-overflow: ellipsis;
	/* 用省略号表示被隐藏的内容 */
	margin: 30rpx 0 20rpx 0;
}

.tab1_item_desc {
	font-size: 22rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	color: #868686;
	line-height: 36rpx;
}

// .gjzc_title {
// 	width: 750rpx;
// 	height: 80rpx;
// 	padding: 20rpx 32rpx 20rpx 42rpx;
// 	box-sizing: border-box;
// 	display: flex;
// 	justify-content: space-between;
// 	align-items: center;
// }

.gjzc {
	width: 750rpx;
	display: flex;
	flex-direction: column;
	
}
.tab2_item {
	width: 690rpx;
	height: 160rpx;
	background: #FFFFFF;
	border-radius: 15rpx 15rpx 15rpx 15rpx;
	display: flex;
	align-items: center;
	padding: 20rpx;
	box-sizing: border-box;
	margin: 30rpx auto 0;
	.left_pic {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		image {
			width: 120rpx;
			height: 120rpx;
		}
	}
	.tab2_item_info {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 12rpx 0;
		box-sizing: border-box;
		.tab2_item_title {
			font-size: 28rpx;
			color: #333333;
			font-weight: 600;
		}
		.tab2_item_bott {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #B3B3B3;
			
		}
	}
}

// .gjzc_cont {
// 	width: 706rpx;
// 	// height: 324rpx;
// 	// background: #FFFFFF;
// 	// box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.06);
// 	border-radius: 10rpx 10rpx 10rpx 10rpx;
// 	margin: 0 auto;
// }
.noBorder {
	border-bottom: none;
}
.example_item {
	width: 348rpx;
	height: 420rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.06);
	border-radius: 10rpx 10rpx 10rpx 10rpx;
}
/deep/ .u-tabs__wrapper__nav__line {
				left: 0;
	}
	.menu_tabbar {
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -5rpx 10rpx 1rpx rgba(0, 0, 0, 0.03);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 50rpx;
		box-sizing: border-box;
	}
	
	.tabbar_item {
		display: flex;
		flex-direction: column;
		align-items: center;
	
		image {
			width: 44rpx;
			height: 44rpx;
			margin-bottom: 5rpx;
		}
	
		span {
			font-size: 22rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #868686;
		}
	}
</style>
